import React, { memo, useRef, useCallback, useState } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import './index.scss'
const TabBar = memo(function TabBar(props) {
    const { data = [], type, Selecttab, tabindex } = props
    const cls = type === 'indicate' ? 'indicate' : 'highlight'
    const tabbar = useRef()
    const onselect = useCallback((tab, i) => {
        Selecttab(tab, i)
    })
    return (
        <div ref={tabbar} className="tabBar">
            {data.map((e, i) => (
                <TabItem
                    key={i}
                    cls={cls}
                    currentIndex={tabindex}
                    tab={e}
                    i={i}
                    onselect={onselect}
                />
            ))}
        </div>
    )
})
const TabItem = memo(function TabItem(props) {
    const { currentIndex, tab, i, onselect, cls } = props
    const active = currentIndex == i ? `${cls} tab cell-main` : 'tab cell-main'
    return (
        <div
            className={`${active}`}
            onClick={() => {
                onselect(tab, i)
            }}
        >
            <div className="tab-item">{tab.name}</div>
        </div>
    )
})
export default TabBar
